import React, { Component } from 'react'
import { CSSTransition, SwitchTransition } from 'react-transition-group'

export default class CssSwitch extends Component {
  constructor() {
    super();
    this.state = {
      isShow: true,
      mode: 'out-in'
    }
  }
  render() {
    return (
      <div>
        {/* mode:切换的类型，可选值是in-out先进后出， out-in先出后进 */}
        <SwitchTransition
          mode={this.state.mode}
        >
          {/* key:不重复的值 */}
          {/* addEndListener：时间监听 */}
          <CSSTransition
            key={this.state.isShow}
            classNames='react'
            addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
          >
            <div>
              <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
                {this.state.isShow ? 'Hello' : 'GoodBye'}
              </button>
            </div>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}
